<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
        item
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="mt">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-input
            placeholder="产品名称"
            v-model.trim="params.name"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="params.rate"
            placeholder="利率"
            style="width:100%"
          >
            <el-option label="3.8%" value="3.8">3.8%</el-option>
            <el-option label="3.9%" value="3.9">3.9%</el-option>
            <el-option label="4.1%" value="4.1">4.1%</el-option>
            <el-option label="4.3%" value="4.3">4.3%</el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="params.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:100%"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
          <span class="ml isshow" @click="isShow"
            >{{ isShowStatus ? "收起" : "展开"
            }}<i :class="'el-icon-arrow-' + (isShowStatus ? 'up' : 'down')"></i
          ></span>
        </el-col>
      </el-row>
      <el-row v-show="isShowStatus" :gutter="12" class="mt">
        <el-col :span="6">
          <el-input
            placeholder="产品类别"
            v-model.trim="params.type"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
            v-model.trim="params.highest"
            placeholder="最高分期数"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model.trim="params.status" placeholder="状态"></el-input>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-card>
    <el-card class="mt">
      <el-table :data="list">
        <el-table-column
          type="index"
          width="50px"
          label="序号"
        ></el-table-column>
        <el-table-column label="产品名称" prop="name"></el-table-column>
        <el-table-column label="产品类别" prop="type"></el-table-column>
        <el-table-column
          label="利率"
          prop="rate"
          width="50px"
        ></el-table-column>
        <el-table-column label="开始日期" prop="date"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-tag
              effect="dark"
              :type="scope.row.status == 1 ? 'success' : 'danger'"
              >{{ scope.row.status == 1 ? "已启用" : "已禁用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="最高分期数(月)"
          prop="highest"
        ></el-table-column>
        <el-table-column label="申请客户数量" prop="number"></el-table-column>
        <el-table-column label="累计签约余额" prop="total"></el-table-column>
        <el-table-column label="件均" prop="average"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="small"
              :type="scope.row.status == 2 ? 'primary' : 'danger'"
              >{{ scope.row.status == 2 ? "启用" : "禁用" }}</el-button
            >
            <el-button size="small" type="primary" @click="detail"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import breadCrumb from "@/mixins/breadCrumb.js";
import { get } from "@/utils/http.js";
// import moment from "moment"
export default {
  data() {
    return {
      // 查询参数
      params: {
        name: "",
        rate: "",
        date: [],
        type: "",
        highest: "",
        status: "",
        
      },
      // 表格数据
      list: [],
      total: 0,
      isShowStatus: false,
    };
  },
  mixins: [breadCrumb],
  mounted() {
    this.productAll();
  },
  methods: {
    //   搜索部分的展开收起操作
    isShow() {
      this.isShowStatus = !this.isShowStatus;
    },
    // 请求后台数据
    productAll() {
      get("/productList").then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
      });
    },
    // 进入详情页面
    detail() {
      this.$router.push("/product/detail");
    },
    // 点击查询筛选

    search() {
      // let searchList = [];
      // 找到哪些搜索项填了的
      // for (let key in this.params) {
      //   if (this.params[key]) {
      //     searchList.push({ [key]: this.params[key] });
      //   }
      // }
      // this.list=this.productAll()
      this.list = this.list.filter((item) => {
        
       return  (item.name ==
          (this.params.name == "" ? item.name : this.params.name) &&
          item.rate ==
            (this.params.rate == "" ? item.rate : this.params.rate) &&
          item.date ==
            (this.params.date == "" ? item.date : this.params.date) &&
          item.type ==
            (this.params.type == "" ? item.type : this.params.type) &&
          item.highest ==
            (this.params.highest == "" ? item.highest : this.params.highest) &&
          item.status ==
            (this.params.status == "" ? item.status : this.params.status));
      });
    },
    // 重置搜索项
    reset(){
      this.params.name=''
      this.params.type=''
      this.params.rate=''
      this.params.date=''
      this.params.highest=''
      this.params.status=''
      this.list=this.productAll()
    }
  },
};
</script>

<style lang="less" scoped>
.isshow {
  font-size: 14px;
  cursor: pointer;
}
</style>
